<template>
    <view class="box">
        <!-- <view class="status_bar">
            <text>定位地址</text>
        </view> -->
        <view>
            <view>
                <map :longitude="mylongitude" :latitude="mylatitude"></map>
            </view>
            <view class="myadd">
                <span>我的位置</span>
                <view class="choosemyaddress" @click="chooseaddress()">
                    <text>{{name}}</text>
                    <image src="../../../../static/img/myhome/wancheng@3x.png"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mylongitude: 0,
                mylatitude: 0,
                name: '默认',
                markers: [{
                        id: 0,
                        iconPath: '', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 20, //高
                        title: '你在哪了', //标注点名
                        alpha: 0.5, //透明度
                        label: { //为标记点旁边增加标签   //因背景颜色H5不支持
                            content: '唐山迁安', //文本
                            color: 'red', //文本颜色
                        }}]
                };
            },
            methods: {
                    chooseaddress() {
                        uni.chooseLocation({
                            success: (res) => {
                                this.mylongitude = res.longitude
                                this.mylatitude = res.latitude
                                this.name = res.name
                            }
                        })
                    }
                },
                onLoad(options) {
                    this.name = options.name
                    uni.getLocation({
                        success: (res) => {
                            this.mylongitude = res.longitude
                            this.mylatitude = res.latitude
                        }
                    })
                }
        }
</script>

<style lang="scss">
    .status_bar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 176rpx;

        text {
            font-family: PingFang-SC-Bold;
            font-size: 36rpx;
            font-weight: 600;
            color: #191919;
            margin-top: 75rpx;
        }
    }

    .box {
        min-height: 1624rpx;
        background-color: #eee;
    }

    map {
        width: 750rpx;
        height: 500rpx;
    }

    .myadd {
        margin: 59rpx 30rpx 30rpx;

        span {
            margin-left: 30rpx;
            font-family: PingFang-SC-Bold;
            font-size: 32rpx;
            font-weight: 600;
            line-height: 38rpx;
            letter-spacing: 0rpx;
            color: #191919;
        }

        .choosemyaddress {
            position: relative;
            box-sizing: border-box;
            height: 98rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            margin: 30rpx;
            padding: 30rpx;

            text {
                font-size: 28rpx;
                color: #666666;
            }

            image {
                right: 30rpx;
                position: absolute;
                width: 50rpx;
                height: 50rpx;
                border-radius: 30rpx;
            }
        }
    }
</style>
